<template>
  <div class="supplier-account-container">
    <!-- v-if="accountData.items.length > 0" -->
    <el-table
      v-loading="listLoading"
      :data="accountData.items"
      class="fb-table"
      element-loading-text="加载中..."
      header-cell-class-name="order-data-header-cell"
      fit
      hightlight-current-row>
      <EmptyPlaceholder slot="empty" />
      <el-table-column fixed="left" type="index" width="50" align="left" label="序号"/>
      <template v-for="item in tableLabels">
        <el-table-column
          v-if="!item.isHide"
          :key="item.key"
          :label="item.label"
          :min-width="item.width || 120"
          align="left">
          <template slot-scope="scope">
            <SecretText
              v-if="['payNum', 'identityNumber','tel', 'province'].includes(item.key)"
              :log-text="getLogText(scope.row, item)"
              :format="item.formatCallback"
              :origin-text="scope.row[item.key]" />
            <ToolTip v-else :content="scope.row[item.key]" />
          </template>
        </el-table-column>
      </template>
      <el-table-column :width="operateWidth" align="left" label="操作" fixed="right">
        <template slot-scope="scope">
          <template v-if="!showMobilePage">
            <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button class="button-text border-left" type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
          </template>
          <tableOperateBtn v-else>
            <el-dropdown-item class="more-btn" @click.native="handleEdit(scope.row)">
              <div style="font-size: 14px">编辑</div>
            </el-dropdown-item>
            <el-dropdown-item class="more-btn" @click.native="handleDelete(scope.row)">
              <div style="font-size: 14px">删除</div>
            </el-dropdown-item>
          </tableOperateBtn>
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex" justify="end" class="pagination-area">
      <el-pagination
        v-if="accountData.total > 10"
        :current-page="params.page"
        :page-size="params.perPage"
        :total="accountData.total"
        :page-sizes="[10,20, 50, 100, 250, 500]"
        layout="total, prev, pager, next, sizes, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </el-row>
  </div>
</template>

<script>
import EmptyPlaceholder from '@/components/Common/emptyPlaceholder';
import { showModal } from '@/utils/message';
import { accountList, accountDelete } from '@/api/supplier';
import mobileTable from '@/mixins/mobileTable';

export default {
  components: {
    EmptyPlaceholder
  },
  mixins: [mobileTable],
  props: {
    supplierId: {
      type: Number,
      default: null
    },
    type: {
      type: Number,
      default: null
    },
    hideContactPerson: { // 有赞订单需要展示对方联系人字段
      type: Boolean,
      default: true
    },
    moduleName: {
      type: String,
      default: '有赞供应商'
    }
  },
  data() {
    return {
      params: {
        perPage: 10,
        page: 1
      },
      listLoading: false,
      accountData: {
        items: []
      }
    };
  },
  computed: {
    tableLabels() {
      return [
        { key: 'payName', label: '收款户名', width: 150 },
        { key: 'payNum', label: '收款账号', width: 180 },
        { key: 'bank', label: '银行', width: 150 },
        { key: 'subBank', label: '支行', width: 160 },
        { key: 'contactPerson', label: '对方联系人', width: 160, isHide: this.hideContactPerson },
        { key: 'identityNumber', label: '身份证号', width: 180 },
        { key: 'tel', label: '联系电话', width: 120 },
        { key: 'province', label: '省市', width: 180, formatCallback: this.formatArea },
        { key: 'createUserName', label: '创建人', width: 120 },
        { key: 'departmentName', label: '所属部门', width: 120 }
      ];
    }
  },
  created() {
    this.getAccountData();
  },
  methods: {
    async getAccountData(reset) {
      if (reset) this.params.page = 1;
      this.params.supplierId = this.supplierId;
      this.params.id = this.supplierId;
      this.params.type = this.type;
      try {
        const res = await accountList(this.params);
        if (res.code === 200) {
          this.accountData = res.data;
        }
      } catch (err) {
        console.log(err);
      }
    },
    formatArea(val) {
      if (!val) return '--';
      return val.replace(/[,|\/]/g, '-');
    },
    handleSizeChange(val) {
      this.params.perPage = val;
      this.getAccountData(true);
    },
    handleCurrentChange(val) {
      this.params.page = val;
      this.getAccountData();
    },
    handleEdit(item) {
      this.$emit('handleEdit', item);
    },
    handleDelete(item) {
      showModal('请确认是否删除？').then(_ => {
        accountDelete(item.id, { type: 3 }).then(res => {
          if (res.code === 200) {
            this.getAccountData(true);
            this.$message.success('删除成功');
          }
        }).catch(err => {
          console.log(err);
        });
      });
    },
    getLogText(row, item) {
      return `${this.moduleName || '有赞供应商'}收款账户${row.payName}的${item.label}`;
    }
  }
};
</script>

<style scoped lang="scss">
.flex {
  display: flex;
  align-items: center;
}
.supplier-account-container {
  background-color: #fff;
  padding: 16px 0 10px;
  ::v-deep .empty-class {
    padding: 0;
  }
}
.border-left {
  position: relative;
  padding-left:6px;
  margin-left: 0;
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -7px;
    width: 1px;
    background: #ddd;
    height: 14px;
  }
}
</style>
